<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
			h4,p,span,del,a,{
				background-color:pink;
				weight:100px;
				height:50px;
				margin:auto: /*给盒子设置水平居中*/
				text-align: center;  /*文本居中*/
			}
			a{
				display:block;  /*将a标签转换为块元素*/
			}
			
		</style>
	</head>
	<body>
		<!--
		标签的显示模式
		一.块 block元素(h1~h6,p,div,ul,ol,li)：
		1，比较霸道，单独占一行
		2，默认宽度是父级元素宽度的100%
		3，可以设置宽，高
		4，块元素可以包含行内元素和其他行内元素
		5，文本标签（h1~h6,p)内不要再装块元素
		
		二.行内元素 inline(span，strong,b,em,i,a,ins)
		1，一行显示多个
		2，默认的宽度是内容的宽度
		3，宽，高属性设置无效
		4，行内元素只包含文本或其他行内元素，一般不包含块元素。
		
		三，行内块元素 inline-block()：
		1，一行显示多个
		2，默认的宽度是内容的宽度
		3，可以设置宽，高和对齐属性input
		4，<input /><img /><td></td>
		
		四，元素显示模式的转换：
		display：block/inline/inlineblock；
		-->
        <!--<h4>小米su7</h4>
		<p>性能旋风....</p>
		<span>2399</span>
		<del>2499</del>
		<a href="www.baidu.com"></a>
		<input type="text" />
		<input type="password">  
		-->
	</body>
	<div class="box1"> 
		<img src=""
		<p>redmi k70</p>
		<h4>第二代骁龙</h4>
		<span>2399</span>
		<del>2499</del>
		
	</div>
</html>
